<template>
  <div class="goods">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 顶部搜索添加区域 -->
      <div style="width:500px;display:flex;">
        <el-input
          placeholder="请输入内容"
          v-model="searchValue"
          class="input-with-select"
          @clear="inputClear"
          clearable
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
            :disabled="searchValue === ''"
          ></el-button>
        </el-input>
        <el-button
          type="primary"
          size="default"
          style="margin-left:20px;"
          @click="$router.push('/goods/add')"
          >添加商品</el-button
        >
      </div>
      <!-- 表格内容主体区域 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%;margin-top:20px;"
        size="small"
      >
        <el-table-column type="index" label="#" width="60"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="120">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="80">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="160">
          <template v-slot="scope">
            {{ scope.row.add_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template v-slot="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editGood(scope.row.goods_id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleted(scope.row.goods_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 10, 15, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      //  搜索输入框绑定数据
      searchValue: '',
      //  页码
      pagenum: 1,
      //  每页数据量
      pagesize: 10,
      //  商品列表表格数据
      tableData: [],
      //  数据总数
      total: 0
    }
  },
  methods: {
    //  搜索按钮点击事件
    async search () {
      // 获取商品列表数据
      const { data: res } = await this.$http.get('goods', {
        params: {
          query: this.searchValue,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      //  商品数据和数据总数保存
      this.tableData = res.data.goods
      this.total = res.data.total
    },
    // 搜索输入框清空事件
    inputClear () {
      this.search()
    },
    //  分页器页尺寸改变事件
    handleSizeChange (newsize) {
      this.pagesize = newsize
      this.search()
    },
    // 分页器当前页改变
    handleCurrentChange (newsize) {
      this.pagenum = newsize
      this.search()
    },
    //  删除商品
    deleted (id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.delete(`goods/${id}`)
          if (res.meta.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          let index = this.tableData.findIndex(item => {
            return item.goods_id === id
          })
          this.tableData.splice(index, 1)
        })
        .catch(() => {})
    },
    //  编辑商品
    editGood (id) {
      this.$router.push('/goods/add?id=' + id)
    }
  },
  created () {
    // 获取商品列表数据
    this.search()
  }
}
</script>
<style lang="less" scoped></style>
